import React, { useEffect } from 'react';
import useHoxModel from '../../useHoxModel';
import styles from './index.less';
import { sumBy } from 'lodash';
import { AlarmDoorList } from '../../API';

const DemoStackedArea: React.FC = () => {
  const { getAlarmDoorList, alarmDoorList = [] } = useHoxModel((model) => [
    model.alarmDoorList,
    model.alarmDoorListLoading,
  ]);
  useEffect(() => {
    getAlarmDoorList();
  }, []);
  const sum = sumBy(alarmDoorList, (o: { alarmCount: number }) => o.alarmCount);

  return (
    <div className={styles['alarm-list-wrap']}>
      <div className={styles['title']}>告警排行</div>
      {alarmDoorList.map((item: AlarmDoorList, index: number) => {
        let percentageNumber = sum !== 0 ? ((item.alarmCount / sum) * 100).toFixed(2) : 0;
        return (
          <div className={styles['alarm-list-item']} key={index.toString(36) + index}>
            <div className={styles['content']}>
              <span>{`${index + 1}.`}</span>
              <span className={styles['name']}>
                <span>{item.name}</span>
              </span>
              <span className={styles['time']}>{`${item.alarmCount}次`}</span>
              <span className={styles['percentage']}>{`${percentageNumber}%`}</span>
            </div>
            <div className={styles['percentage-wrap']}>
              <div className={styles['progress']} style={{ width: percentageNumber + '%' }}></div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default DemoStackedArea;
